import {watch} from 'vue'
import { storeToRefs } from 'pinia'
import { langTitle } from '@/hooks/use-common'
import { useConfigStore } from '@/store/config'

const componentToProps={
  ElInput:'placeholder',
  ElTableColumn:'label'
}

function translate(el,{value}){
  let saveOriginTitle=''
  const {language} =storeToRefs(useConfigStore())

  ////save the original title
  const typeName=el.__vueParentComponent?.type.name
  const nameTitle=el.__vueParentComponent?.props[componentToProps[typeName]]

  saveOriginTitle=nameTitle || el.innerText
  console.log('el',el);
  console.log('el.__vueParentComponent',el.__vueParentComponent);
  console.log('typeName',typeName);
  console.log('nameTitle',nameTitle);
  console.log('el.__vnode',el.__vnode);
  console.log('saveOriginTitle',saveOriginTitle);
  
  watch(
    ()=>language.value,
    ()=>{
      //element tag or component
      if(typeName?.startsWith('El')){
        console.log('tartsWith El')
        //self custom
        if(Object.keys(componentToProps).includes(typeName)){
          const props=el.__vueParentComponent.props
          props[componentToProps[typeName]]=langTitle(saveOriginTitle)
        }else{
          el.innerText=langTitle(saveOriginTitle)
        }
      }else{
        //common tag such as div span output so on;
        if(el.__vnode?.type){
          console.log('el.__vnode?.type',el.__vnode?.type);
          el.innerText=langTitle(saveOriginTitle)
        }
      }
      },
      { immediate:true}
  )
}

export default {
  mounted(el,binding) {
    translate(el,binding)
  },
}